<template>
	<view class="bus">
		<view class="b1" v-for="item in list">
			<view class="b2" @click="tobuslist(item.id)">
				<text>{{item.name}}</text>
			</view>
			<view class="b3">
				<text>{{item.first}}——</text>
				<text>{{item.end}}</text>
			</view>
			<view class="b4">
				<text style="margin-right: 50px;">票价：{{item.price}}元</text>
				<text>里程：{{item.mileage}}公里</text>
				<u-icon name="arrow-right" style="float: right; margin-top: 10px;" @click="getmessage(item.id)" v-show="item.key1"></u-icon>
				<u-icon name="arrow-down" style="float: right; margin-top: 10px;" v-show="!item.key1" @click="shouqi(item.id)"></u-icon>
			</view>
			<view class="b5" v-for="it in mess" v-show="item.key2">
				<text>{{it.name}}</text>
			</view>
			<u-line></u-line>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[],
				mess:[]
			}
		},
		onLoad() {
			this.getlist()
		},
		methods: {
			getlist(){
				this.api.get('/prod-api/api/bus/line/list').then(res=>{
					this.list=res.data.rows.map(item=>({
						...item,
						key1:true,
						key2:false
					}))
					console.log(this.list)
				})
				
			},
			shouqi(id){
				this.list.forEach(item=>{
					if(item.id===id){
						item.key1=true
						item.key2=false
					}
				})
			},
			getmessage(id){
				this.list.forEach(item=>{
					if(item.id===id){
						item.key1=false
						item.key2=true
					}else{
						item.key1=true
						item.key2=false
					}
				})
				this.api.get('/prod-api/api/bus/stop/list?linesId='+id).then(res=>{
					this.mess=res.data.rows
				})
			},
			tobuslist(id){
				uni.navigateTo({
					url:'/pages/serve/bus/buslist/buslist?id='+id
				})
			}
		}
	}
</script>

<style lang="scss">

.b1{
	text-align: center;
	display: flex;
	flex-direction: column;
	line-height: 35px;
	.b2{
		
		width: 80px;
		border: 1px solid #ccc;
		margin: 20px auto;
	}
	.b4{
		// display: flex;
		// width: 260px;
		// margin: 0 auto;
	}
}

</style>
